<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #chooseFile {
            display: none;
        }

        #uploadAvatar {
            width: 100px;
            height: 40px;
            border-radius: 10px;
            background-color: orange;
            border: 1px solid orange;
            color: #fff;
        }
    </style>
</head>

<body>

    <!-- 文件选择器 -->
    <input type="file" id="chooseFile">
    <button id="uploadAvatar">上传头像</button>
    <img src="" id="avatar" width="100" height="100">
    <button id="saveBtn">确认修改</button>

    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        let fileInfo;

        // 点击普通按钮
        uploadAvatar.onclick = function () {
            // 触发【文件选择器】的点击事件（打开文件选择框）
            chooseFile.click();
        }

        // 用户在【文件选择器】中选择了一张图片
        chooseFile.onchange = function (e) {
            // 1. 获取选中的文件信息
            fileInfo = e.target.files[0];
            // 2. 将文件信息对象转换为文件路径
            const imgUrl = getObjectURL(fileInfo);
            if (imgUrl) {
                // 将图片路径设置给 img 标签，进行图片预览
                avatar.src = imgUrl;
            }
        }


        saveBtn.onclick = function () {
            // 将文件数据处理成formData格式
            // 1. 创建一个空的formData对象
            const fd = new FormData();
            // 2. 往fd对象中添加数据，传递给后端
            fd.append('_id', '682ed7cb157f1b51eb57a916');
            fd.append('file', fileInfo);

            // $.ajax({
            //     url: 'http://nocat.life:3021/user/updateWithImage',
            //     type: 'POST',
            //     // 以formData格式发送给后端的参数
            //     data: fd,
            //     // 让 jQuery 不要再额外的处理 data 数据
            //     processData: false,
            //     contentType: false,

            //     success(res) {
            //         console.log(res);
            //     }
            // })

            fetch("http://nocat.life:3021/user/updateWithImage", {
                method: 'POST',
                body: fd
            })
                .then(response => response.json())
                .then(res => {
                    console.log('请求结果：', res);
                })

        }

        // 封装一个函数：用来将文件对象转成文件 URL
        function getObjectURL(file) {
            if (window.webkitURL) {
                return window.webkitURL.createObjectURL(file);

            } else if (window.createObjectURL) {
                return window.createObjectURL(file);

            } else if (window.URL) {
                return window.URL.createObjectURL(file);

            }
            return null;
        }
    </script>
</body>

</html>